<template>
  <el-container class="container">
    <el-header class="header" height="300px">
      <div class="accountInfo">
        <div class="userInfo">
          <div class="avatar">
            <el-image :src="avatar"
                      :preview-src-list="[avatar]"
                      style="width: 120px; height: 120px; border-radius: 50%"
            >
            </el-image>
          </div>
          <div class="info">
            <div class="nick"><span>{{alumni ? alumni.createOne.nick : ''}}</span></div>
            <div class="signature"><span>{{alumni ? alumni.createOne.signature : ''}}</span></div>
          </div>
        </div>
        <div class="visitor">
          <div style="padding-top: 20px">
            <span>{{alumni ? alumni.createOne.visitor : 0}}</span>
          </div>
          <div>
            <em>访客量</em>
          </div>
        </div>
      </div>
    </el-header>
    <el-main>
      <el-descriptions :column="2">
        <el-descriptions-item label="姓名">{{alumni ? alumni.realName : ''}}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{alumni ? alumni.createOne.phone : ''}}</el-descriptions-item>
        <el-descriptions-item label="学号">{{alumni ? alumni.stuNumber : ''}}</el-descriptions-item>
        <el-descriptions-item label="学历">
          <el-tag size="small" type="success">{{alumni ? alumni.education : ''}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="入学时间">{{alumni ? alumni.admissionDate : ''}}</el-descriptions-item>
        <el-descriptions-item label="毕业时间">{{alumni ? alumni.graduationDate : ''}}</el-descriptions-item>
        <el-descriptions-item label="在校班级">{{alumni ? alumni.clazz.className : ''}}</el-descriptions-item>
        <el-descriptions-item label="在校专业">{{alumni ? alumni.major.majorName : ''}}</el-descriptions-item>
        <el-descriptions-item label="在校学院">{{alumni ? alumni.college.collegeName : ''}}</el-descriptions-item>
        <el-descriptions-item label="微信号">{{alumni ? alumni.wechat : ''}}</el-descriptions-item>
        <el-descriptions-item label="QQ号">{{alumni ? alumni.qq : ''}}</el-descriptions-item>
        <el-descriptions-item label="电子邮箱">{{alumni ? alumni.email : ''}}</el-descriptions-item>
        <el-descriptions-item label="联系地址">{{alumni ? alumni.address : ''}}</el-descriptions-item>
      </el-descriptions>
      <div class="butt">
        <el-button type="primary" @click="showDialog=true">给校友留言</el-button>
      </div>
      <!--留言对话框-->
      <el-dialog
        :title="`给校友 ${alumni ? alumni.realName : ''} 进行留言`"
        :visible.sync="showDialog"
        @close="handleCancel"
        center
        top="16%"
        width="30%">
        <el-input type="textarea" v-model="message.details"></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleCancel">取 消</el-button>
          <el-button type="primary" @click="submit">提 交</el-button>
        </span>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
    export default {
        name: "AlumniInfo",
        data() {
            return {
                noAvatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
                alumni: null,
                showDialog: false,
                message: {
                    messageId: 0,
                    type: '校友留言',
                    details: '',
                    sendId: 0,
                    receiveId: 0,
                    createTime: ''
                },
                currentUser: null
            }
        },
        watch: {},
        methods: {
            getAlumni() {
                const alumniId = this.$route.query.alumniId;
                const params = {alumniId: alumniId};
                this.getRequest('/getAlumniDetail', params).then(res => {
                    if (res) {
                        this.alumni = res;
                        this.addVisitor();
                    } else {
                        console.log('获取校友信息失败!');
                    }
                })
            },
            handleCancel(){
                this.showDialog=false;
                this.details=''
            },
            submit(){
                if(this.message.details===''){
                    this.$message.error('留言信息不能为空！');
                    return false;
                }
                this.message.sendId=this.currentUser.userId;
                this.message.receiveId=this.alumni.alumniId;
                this.message.createTime=this.datetime2string(new Date());
                this.postRequest('/sendMessage', this.message).then(res=>{
                    if(res==='success'){
                        this.$message.success('留言成功！');
                        this.showDialog=false;
                    }else{
                        this.$message.error('留言失败');
                    }
                })
            },
            addVisitor(){
                const params={userId: this.alumni.createOne.userId};
                this.getRequest('/addVisitor', params).then(res=>{
                    if(res==='success'){
                        console.log('浏览量+1');
                    }else{
                        console.log('浏览量添加失败！');
                    }
                })
            }
        },
        created() {
            this.getAlumni();
            const user = sessionStorage.getItem("currentUser");
            this.currentUser = JSON.parse(user);
        },
        computed: {
            avatar() {
                if(this.alumni){
                    return this.alumni.createOne.avatarUrl ? '/api/' + this.alumni.createOne.avatarUrl : this.noAvatar;
                }
            },
            activeName() {
                return this.$route.fullPath;
            }
        }
    }
</script>

<style scoped>
  .container {
    width: 100%;
    height: 100%;
  }

  .header {
    width: 100%;
    background-image: url("../assets/img/header_bg.png");
    padding: 0 25%;
  }

  .accountInfo {
    display: flex;
    flex-direction: row;
    margin-top: 100px;
  }

  .userInfo {
    display: flex;
    flex-direction: row;
    height: 125px;
  }

  .info {
    margin-left: 20px;
    width: 300px;
  }

  .info .nick {
    font-size: 30px;
    font-weight: bold;
  }

  .info .signature {
    font-size: 14px;
    color: #7f7b7b;
    padding: 10px 0;
    max-height: 65px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .visitor {
    width: 100px;
    height: 125px;
    text-align: center;
    margin-left: 30%;
  }

  .visitor span {
    font-size: 30px;
    font-weight: bold;
  }

  .visitor em {
    font-size: 14px;
    color: #7f7b7b;
    font-style: normal;
  }

  .el-main {
    min-height: 600px;
    padding: 0 15%;
    margin-left: 15%;
    margin-top: 1%;
  }

  .butt .el-button {
    margin-left: 30%;
  }
</style>
